import React, { useState, useEffect, useRef } from 'react';
import './DigitalHumanPage.css';
import MySelf from './MySelf';
import ActionController from './ActionController';
import Exhibition3D from './Exhibition3D';
import type { ActionType } from './ActionController';
// 导入Redux相关hooks和类型
import { useAppDispatch, useAppSelector } from '../store/hooks';
import { toggleTheme } from '../store/slices/themeSlice';
import { toggleLanguage } from '../store/slices/languageSlice';
// i18n
import i18n from 'i18next';
import { useTranslation } from 'react-i18next';
// RBAC 选择器：判断是否管理员
import { selectIsAdmin } from '../store/selectors/authSelectors';

const DigitalHumanPage: React.FC = () => {
  // i18n t
  const { t } = useTranslation();

  // Redux状态和dispatch
  const dispatch = useAppDispatch();
  // 从Redux store获取主题状态
  const currentTheme = useAppSelector((state) => state.theme.currentTheme);
  // 从Redux store获取语言状态
  const currentLanguage = useAppSelector((state) => state.language.currentLanguage);
  // 从Redux 获取是否为管理员
  const isAdmin = useAppSelector(selectIsAdmin);
  
  // 动作状态管理 - 存储当前选择的动作类型（本地状态）
  const [currentAction, setCurrentAction] = useState<ActionType>('idle');
  
  // 展览馆状态管理 - 控制是否显示3D展览馆（本地状态）
  const [showExhibition, setShowExhibition] = useState(false);

  // 本地视频播放列表：先 a1 再 a2
  const videoPlaylist = ['/videos/a1.mp4', '/videos/a2.mp4'];
  const [videoIndex, setVideoIndex] = useState(0);
  const videoRef = useRef<HTMLVideoElement | null>(null);

  // 评论输入框内容（本地状态）
  const [commentText, setCommentText] = useState('');

  // 弹幕样式配置
  type DanmakuStyleConfig = {
    fontSize: number;
    color: string;
    opacity: number;
    fontWeight: 'normal' | 'bold';
    textShadow: string;
  };

  // 简易本地弹幕队列
  type DanmakuItem = { 
    id: number; 
    text: string; 
    row: number; 
    style: DanmakuStyleConfig;
  };
  const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
  const danmakuRows = 8; // 减少行数，增加行间距，避免重叠

  // 本地存储弹幕（按固定时间节点）
  type StoredDanmaku = {
    id: string;
    videoSrc: string;
    content: string;
    timestampSec: number; // 精度到秒
    timeNode: number; // 时间节点：2, 4, 6, 8, 10, 12, 14, 16, 20
    createdAt: number;
    style: DanmakuStyleConfig; // 弹幕样式
  };

  const LOCAL_KEY = 'danmaku_store_v1';
  
  // 定义固定的时间节点（2秒间隔）
  const TIME_NODES = [2, 4, 6, 8, 10, 12, 14, 16, 20];
  
  
  
  // 弹幕设置面板状态
  const [showSettingsPanel, setShowSettingsPanel] = useState(false);
  const settingsIconRef = useRef<HTMLButtonElement>(null);
  
  // 弹幕开关状态
  const [isDanmakuEnabled, setIsDanmakuEnabled] = useState(true);
  
  
  // 弹幕设置配置
  const [danmakuSettings, setDanmakuSettings] = useState({
    opacity: 80, // 不透明度百分比
    displayArea: 0, // 显示区域：0-一行, 1-两行, 2-半屏, 3-全屏
    fontSize: 1, // 字体大小：0-小号, 1-中号, 2-大号, 3-特大号
    moveSpeed: 2, // 移动速度：0-慢, 1-适中, 2-快, 3-很快
    fontColor: '#ffffff', // 字体颜色
  });
  
  // 设置选项配置
  const DISPLAY_AREA_OPTIONS = ['一行', '两行', '半屏', '全屏'];
  const FONT_SIZE_OPTIONS = ['小号', '中号', '大号', '特大号'];
  const MOVE_SPEED_OPTIONS = ['慢', '适中', '快', '很快'];
  const FONT_SIZE_VALUES = [12, 16, 20, 24]; // 对应的实际字体大小
  const MOVE_SPEED_VALUES = [8, 6, 4, 2]; // 对应的动画时长（秒）
  
  // 恢复默认设置
  const resetToDefault = () => {
    setDanmakuSettings({
      opacity: 80,
      displayArea: 0,
      fontSize: 1,
      moveSpeed: 2,
      fontColor: '#ffffff',
    });
  };

  // 点击外部关闭设置面板
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (showSettingsPanel && settingsIconRef.current) {
        const target = event.target as Node;
        if (!settingsIconRef.current.contains(target) && 
            !document.querySelector('.danmaku-settings-panel')?.contains(target)) {
          setShowSettingsPanel(false);
        }
      }
    };

    if (showSettingsPanel) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showSettingsPanel]);

  // 当弹幕设置改变时，清除当前显示的弹幕避免样式冲突
  useEffect(() => {
    // 延迟清除，让用户看到设置生效
    const timer = setTimeout(() => {
      setDanmakus([]);
    }, 100);
    
    return () => clearTimeout(timer);
  }, [danmakuSettings.fontSize, danmakuSettings.fontColor, danmakuSettings.opacity]);
  
  // 根据时间戳计算对应的时间节点
  const getTimeNode = (timestampSec: number): number => {
    // 找到最接近的时间节点
    for (let i = TIME_NODES.length - 1; i >= 0; i--) {
      if (timestampSec >= TIME_NODES[i]) {
        return TIME_NODES[i];
      }
    }
    return TIME_NODES[0]; // 如果小于2秒，归到第2秒节点
  };

  const readAllStored = (): StoredDanmaku[] => {
    try {
      const raw = localStorage.getItem(LOCAL_KEY);
      if (!raw) return [];
      const arr = JSON.parse(raw) as StoredDanmaku[];
      return Array.isArray(arr) ? arr : [];
    } catch {
      return [];
    }
  };

  const writeAllStored = (items: StoredDanmaku[]) => {
    localStorage.setItem(LOCAL_KEY, JSON.stringify(items));
  };

  const appendStored = (item: StoredDanmaku) => {
    const all = readAllStored();
    all.push(item);
    writeAllStored(all);
  };

  
  // 获取指定时间节点的弹幕（跨视频）
  const getStoredByTimeNode = (timeNode: number): StoredDanmaku[] => {
    return readAllStored().filter((d) => d.timeNode === timeNode);
  };

  // 当前视频 src
  const currentVideoSrc = videoPlaylist[videoIndex];

  // 弹幕调度控制（按时间节点）
  const lastTimeNodeRef = useRef<number | null>(null);
  const currentTimeNodeDisplayedIdsRef = useRef<Set<string>>(new Set());
  
  // 全局弹幕调度队列，确保所有弹幕都有序显示
  const danmakuQueueRef = useRef<Array<{text: string, style?: DanmakuStyleConfig, delay: number}>>([]);
  const isProcessingQueueRef = useRef(false);
  const lastDanmakuTimeRef = useRef<number>(0); // 记录上一个弹幕的显示时间

  // 根据设置生成弹幕样式
  const generateDanmakuStyle = (): DanmakuStyleConfig => {
    return {
      fontSize: FONT_SIZE_VALUES[danmakuSettings.fontSize],
      color: danmakuSettings.fontColor,
      opacity: danmakuSettings.opacity / 100,
      fontWeight: 'normal',
      textShadow: '0 1px 2px rgba(0,0,0,0.6)',
    };
  };

  // 处理弹幕队列，确保弹幕有序显示
  const processDanmakuQueue = () => {
    console.log('processDanmakuQueue 被调用，队列长度:', danmakuQueueRef.current.length, '正在处理:', isProcessingQueueRef.current);
    
    if (isProcessingQueueRef.current || danmakuQueueRef.current.length === 0) {
      console.log('队列处理跳过 - 正在处理或队列为空');
      return;
    }
    
    isProcessingQueueRef.current = true;
    const nextDanmaku = danmakuQueueRef.current.shift();
    
    if (nextDanmaku) {
      // 计算相对于上一个弹幕的延迟时间
      const currentTime = Date.now();
      const timeSinceLastDanmaku = currentTime - lastDanmakuTimeRef.current;
      const minInterval = 500; // 最小间隔500ms
      
      // 如果距离上一个弹幕时间太短，增加延迟
      const actualDelay = Math.max(nextDanmaku.delay, minInterval - timeSinceLastDanmaku);
      
      setTimeout(() => {
        // 更新最后弹幕时间
        lastDanmakuTimeRef.current = Date.now();
        
        // 实际显示弹幕
        const id = Date.now() + Math.floor(Math.random() * 1000);
        const finalStyle = nextDanmaku.style || generateDanmakuStyle();
        
        // 重新设计的弹幕分配算法，精确避免重叠
        const getAvailablePosition = (fontSize: number) => {
          const currentDanmakus = danmakus;
          
          // 计算每行的实际占用情况
          const rowStatus = new Array(danmakuRows).fill(0); // 0=空, 1=占用
          
          // 标记已占用的行
          currentDanmakus.forEach(d => {
            const dRow = d.row;
            const dFontSize = d.style.fontSize;
            
            // 根据字体大小精确计算占用的行数
            let occupiedRows = 1;
            if (dFontSize >= 24) {
              occupiedRows = 2; // 特大字体占用2行
            } else if (dFontSize >= 20) {
              occupiedRows = 1; // 大字体占用1行
            } else if (dFontSize >= 16) {
              occupiedRows = 1; // 中字体占用1行
            }
            
            // 标记占用的行
            for (let i = dRow; i < Math.min(danmakuRows, dRow + occupiedRows); i++) {
              rowStatus[i] = 1;
            }
          });
          
          // 计算新弹幕需要占用的行数
          let newOccupiedRows = 1;
          if (fontSize >= 24) {
            newOccupiedRows = 2; // 特大字体占用2行
          } else if (fontSize >= 20) {
            newOccupiedRows = 1; // 大字体占用1行
          } else if (fontSize >= 16) {
            newOccupiedRows = 1; // 中字体占用1行
          }
          
          // 找到可以容纳新弹幕的位置
          for (let i = 0; i <= danmakuRows - newOccupiedRows; i++) {
            let canFit = true;
            // 检查从i到i+newOccupiedRows-1的所有行是否都为空
            for (let j = i; j < i + newOccupiedRows; j++) {
              if (rowStatus[j] === 1) {
                canFit = false;
                break;
              }
            }
            if (canFit) {
              return i; // 返回第一个可用的行
            }
          }
          
          // 如果没有完全空的位置，选择占用最少的连续位置
          let bestRow = 0;
          let minOccupancy = Infinity;
          
          for (let i = 0; i <= danmakuRows - newOccupiedRows; i++) {
            let occupancy = 0;
            for (let j = i; j < i + newOccupiedRows; j++) {
              occupancy += rowStatus[j];
            }
            if (occupancy < minOccupancy) {
              minOccupancy = occupancy;
              bestRow = i;
            }
          }
          
          return bestRow;
        };
        
        const row = getAvailablePosition(finalStyle.fontSize);
        const item: DanmakuItem = { id, text: nextDanmaku.text, row, style: finalStyle };
        
        // 调试信息
        console.log(`弹幕分配: "${nextDanmaku.text}", 字体大小: ${finalStyle.fontSize}px, 分配行: ${row}, 延迟: ${actualDelay}ms`);
        
        setDanmakus((prev) => [...prev, item]);
        
        // 动画结束后自动清理（使用设置中的移动速度）
        const animationDuration = MOVE_SPEED_VALUES[danmakuSettings.moveSpeed] * 1000;
        window.setTimeout(() => {
          setDanmakus((prev) => prev.filter((d) => d.id !== id));
        }, animationDuration);
        
        // 处理下一个弹幕
        isProcessingQueueRef.current = false;
        setTimeout(() => processDanmakuQueue(), 100); // 减少队列处理间隔
      }, actualDelay);
    } else {
      isProcessingQueueRef.current = false;
    }
  };

  // 仅显示到弹幕层（不入库）
  const displayDanmaku = (text: string, style?: DanmakuStyleConfig) => {
    console.log('displayDanmaku 被调用:', text);
    
    // 如果弹幕开关关闭，不显示弹幕
    if (!isDanmakuEnabled) {
      console.log('弹幕开关关闭，跳过显示');
      return;
    }
    
    // 限制同时显示的弹幕数量，避免屏幕过于拥挤
    if (danmakus.length >= 6) {
      console.log('弹幕数量已达上限，跳过显示');
      return;
    }
    
    // 简化版本：直接显示弹幕，不使用队列
    const id = Date.now() + Math.floor(Math.random() * 1000);
    const finalStyle = style || generateDanmakuStyle();
    
    // 重新设计的弹幕分配算法，精确避免重叠
    const getAvailablePosition = (fontSize: number) => {
      const currentDanmakus = danmakus;
      
      // 计算每行的实际占用情况
      const rowStatus = new Array(danmakuRows).fill(0); // 0=空, 1=占用
      
      // 标记已占用的行
      currentDanmakus.forEach(d => {
        const dRow = d.row;
        const dFontSize = d.style.fontSize;
        
        // 根据字体大小精确计算占用的行数
        let occupiedRows = 1;
        if (dFontSize >= 24) {
          occupiedRows = 2; // 特大字体占用2行
        } else if (dFontSize >= 20) {
          occupiedRows = 1; // 大字体占用1行
        } else if (dFontSize >= 16) {
          occupiedRows = 1; // 中字体占用1行
        }
        
        // 标记占用的行
        for (let i = dRow; i < Math.min(danmakuRows, dRow + occupiedRows); i++) {
          rowStatus[i] = 1;
        }
      });
      
      // 计算新弹幕需要占用的行数
      let newOccupiedRows = 1;
      if (fontSize >= 24) {
        newOccupiedRows = 2; // 特大字体占用2行
      } else if (fontSize >= 20) {
        newOccupiedRows = 1; // 大字体占用1行
      } else if (fontSize >= 16) {
        newOccupiedRows = 1; // 中字体占用1行
      }
      
      // 找到可以容纳新弹幕的位置
      for (let i = 0; i <= danmakuRows - newOccupiedRows; i++) {
        let canFit = true;
        // 检查从i到i+newOccupiedRows-1的所有行是否都为空
        for (let j = i; j < i + newOccupiedRows; j++) {
          if (rowStatus[j] === 1) {
            canFit = false;
            break;
          }
        }
        if (canFit) {
          return i; // 返回第一个可用的行
        }
      }
      
      // 如果没有完全空的位置，选择占用最少的连续位置
      let bestRow = 0;
      let minOccupancy = Infinity;
      
      for (let i = 0; i <= danmakuRows - newOccupiedRows; i++) {
        let occupancy = 0;
        for (let j = i; j < i + newOccupiedRows; j++) {
          occupancy += rowStatus[j];
        }
        if (occupancy < minOccupancy) {
          minOccupancy = occupancy;
          bestRow = i;
        }
      }
      
      return bestRow;
    };
    
    const row = getAvailablePosition(finalStyle.fontSize);
    const item: DanmakuItem = { id, text, row, style: finalStyle };
    
    // 调试信息
    console.log(`弹幕分配: "${text}", 字体大小: ${finalStyle.fontSize}px, 分配行: ${row}`);
    
    // 添加少量延迟，避免同时发送的弹幕重叠
    const delay = Math.random() * 300 + 100; // 100-400ms延迟
    
    setTimeout(() => {
      setDanmakus((prev) => [...prev, item]);
      console.log('弹幕已添加到显示列表');
      
      // 动画结束后自动清理（使用设置中的移动速度）
      const animationDuration = MOVE_SPEED_VALUES[danmakuSettings.moveSpeed] * 1000;
      window.setTimeout(() => {
        setDanmakus((prev) => prev.filter((d) => d.id !== id));
        console.log('弹幕已从显示列表移除');
      }, animationDuration);
    }, delay);
  };

  // 发送并入本地存储
  const pushDanmaku = (text: string) => {
    console.log('发送弹幕:', text);
    console.log('弹幕开关状态:', isDanmakuEnabled);
    console.log('当前弹幕数量:', danmakus.length);
    
    displayDanmaku(text);
    // 将当前发送的弹幕写入本地存储（绑定当前视频与时间节点）
    const videoEl = videoRef.current;
    const currentTimeSec = Math.floor((videoEl?.currentTime ?? 0));
    const timeNode = getTimeNode(currentTimeSec);
    const storageId = `d_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
    const stored: StoredDanmaku = {
      id: storageId,
      videoSrc: currentVideoSrc,
      content: text,
      timestampSec: currentTimeSec,
      timeNode: timeNode,
      createdAt: Date.now(),
      style: generateDanmakuStyle(), // 使用当前设置生成样式
    };
    appendStored(stored);
    console.log('弹幕已存储到本地:', stored);
  };

  // 当视频切换时，重置调度状态
  useEffect(() => {
    // 重置调度状态
    lastTimeNodeRef.current = null;
    currentTimeNodeDisplayedIdsRef.current = new Set();
    // 清空弹幕队列，避免跨视频的弹幕干扰
    danmakuQueueRef.current = [];
    isProcessingQueueRef.current = false;
    lastDanmakuTimeRef.current = 0;
  }, [currentVideoSrc]);

  // 根据当前播放时间调度弹幕：按时间节点
  const handleTimeUpdate = () => {
    const videoEl = videoRef.current;
    if (!videoEl) return;
    const currentSec = Math.floor(videoEl.currentTime);
    const currentTimeNode = getTimeNode(currentSec);
    
    // 检查是否到达了新的时间节点
    if (lastTimeNodeRef.current !== currentTimeNode) {
      // 进入新的时间节点：清空本节点已展示集并触发该节点所有弹幕
      lastTimeNodeRef.current = currentTimeNode;
      currentTimeNodeDisplayedIdsRef.current = new Set();
      
      // 获取该时间节点的所有弹幕（跨视频）
      const list = getStoredByTimeNode(currentTimeNode);
      if (list.length > 0) {
        // 为同一时间节点的弹幕添加错开显示，避免重叠
        list.forEach((d, index) => {
          if (!currentTimeNodeDisplayedIdsRef.current.has(d.id)) {
            currentTimeNodeDisplayedIdsRef.current.add(d.id);
            // 为每个弹幕添加递增的延迟，确保错开显示
            const staggeredDelay = index * 600; // 增加间隔到600ms，确保不重叠
            setTimeout(() => {
              displayDanmaku(d.content, d.style);
            }, staggeredDelay);
          }
        });
      }
    }
  };

  // 初始化主题设置 - 组件挂载时设置默认主题
  useEffect(() => {
    // 设置HTML根元素的data-theme属性为当前主题
    document.documentElement.setAttribute('data-theme', currentTheme);
  }, [currentTheme]); // 依赖currentTheme，当主题改变时重新设置

  // 当 Redux 语言变化时，同步到 i18n
  useEffect(() => {
    if (i18n.language !== currentLanguage) {
      i18n.changeLanguage(currentLanguage);
    }
  }, [currentLanguage]);

  // 处理动作改变 - 当用户选择不同动作时调用
  const handleActionChange = (action: ActionType) => {
    setCurrentAction(action); // 更新当前动作状态
  };

  // 处理语言切换 - 当用户点击语言按钮时调用
  const handleLanguageChange = () => {
    // 使用Redux dispatch切换语言
    const next = currentLanguage === 'zh' ? 'en' : 'zh';
    // 先切 i18n，再同步Redux（顺序无关紧要，这里两边都做）
    i18n.changeLanguage(next);
    dispatch(toggleLanguage());
  };

  // 处理主题切换 - 当用户点击主题按钮时调用
  const handleThemeChange = () => {
    // 使用Redux dispatch切换主题
    dispatch(toggleTheme());
  };

  // 处理进入展览馆 - 当用户点击进入3D展厅按钮时调用
  const handleEnterExhibition = () => {
    setShowExhibition(true); // 显示3D展览馆
  };

  // 处理退出展览馆 - 当用户点击退出按钮时调用
  const handleExitExhibition = () => {
    setShowExhibition(false); // 隐藏3D展览馆，返回主页面
  };

  // 如果显示展览馆，渲染展览馆组件
  if (showExhibition) {
    return <Exhibition3D onExit={handleExitExhibition} />;
  }

  return (
    <div className="digital-human-page">
      {/* 顶部导航栏 */}
      <header className="header">
        <div className="header-content">
          <div className="logo" aria-hidden>
            {/* 顶部使用背景图，此处隐藏文字避免重复 */}
            <p style={{ visibility: 'hidden', height: 0, margin: 0 }}>{t('companySubtitle')}</p>
          </div>
          <nav className="nav-menu">
            {/* 进入3D展厅按钮 - 根据当前语言显示对应文本，点击进入展览馆 */}
            <button className="nav-btn" onClick={handleEnterExhibition}>{t('enter3D')}</button>
            {/* 语言切换按钮 - 点击切换中英文，显示当前语言（保留给管理员，普通用户可隐藏，如需）*/}
            {isAdmin && (
              <button className="nav-btn" onClick={handleLanguageChange}>{t('languageBtn')}</button>
            )}
            {/* 主题切换按钮 - 仅管理员可见 */}
            {isAdmin && (
              <button className="nav-btn" onClick={handleThemeChange}>
                {currentTheme === 'dark' ? t('lightMode') : t('darkMode')}
              </button>
            )}
          </nav>
        </div>
      </header>

      {/* 主内容区域 */}
      <main className="main-content">
        {/* 背景网格纹理 */}
        <div className="grid-background"></div>
        
        {/* 中央展示区域 */}
        <div className="content-frame">
          <div className="frame-border">
            <div className="video-container">
              {/* 视频内容区域 */}
              <div className="video-content">
                {/* 本地视频播放：先播放 a1.mp4，结束后自动播放 a2.mp4 */}
                <video
                  ref={videoRef}
                  src={videoPlaylist[videoIndex]}
                  controls
                  autoPlay
                  muted
                  playsInline
                  style={{ width: '100%', height: '100%', objectFit: 'cover', background: 'black' }}
                  onEnded={() => {
                    const nextIndex = (videoIndex + 1) % videoPlaylist.length;
                    setVideoIndex(nextIndex);
                  }}
                  onTimeUpdate={handleTimeUpdate}
                  onSeeked={() => {
                    // seek 后重新计算当前时间节点的展示窗口
                    lastTimeNodeRef.current = null;
                    handleTimeUpdate();
                  }}
                />
                {/* 简易弹幕覆盖层 */}
                {isDanmakuEnabled && (
                  <div className="danmaku-layer">
                    {danmakus.map((d) => (
                      <span 
                        key={d.id} 
                        className="danmaku-item" 
                        style={{ 
                          top: `${d.row * 80 + 30}px`, // 进一步增加行间距到80px，确保绝对不重叠
                          fontSize: `${d.style.fontSize}px`,
                          color: d.style.color,
                          opacity: d.style.opacity,
                          fontWeight: d.style.fontWeight,
                          textShadow: d.style.textShadow,
                          lineHeight: '1.0', // 固定行高为1.0，减少占用空间
                        }}
                      >
                        {d.text}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
        {/* 弹幕输入框（位于视频区域下方） */}
        <div className="danmaku-input-outside" onClick={(e) => e.stopPropagation()}>
          <div className="danmaku-input-container">
            {/* 左侧控制区域 */}
            <div className="danmaku-controls-left">
              {/* 弹幕开关 */}
              <div className="danmaku-toggle-container">
                <button
                  className={`danmaku-toggle-btn ${isDanmakuEnabled ? 'enabled' : 'disabled'}`}
                  onClick={(e) => {
                    e.stopPropagation();
                    setIsDanmakuEnabled(!isDanmakuEnabled);
                  }}
                  title={isDanmakuEnabled ? '关闭弹幕' : '打开弹幕'}
                >
                  <span className="toggle-icon">B</span>
                </button>
                <span className="toggle-text">
                  {isDanmakuEnabled ? '弹弹' : '弹弹'}
                </span>
              </div>
              
              {/* 分隔线 */}
              <div className="separator"></div>
              
              {/* 弹幕设置图标 */}
              <div className="settings-container">
                <button
                  ref={settingsIconRef}
                  className="settings-icon-btn"
                  onClick={(e) => {
                    e.stopPropagation();
                    setShowSettingsPanel(!showSettingsPanel);
                  }}
                  title="弹幕设置"
                >
                  ⚙️
                </button>
                
                {/* 弹幕设置面板 */}
                {showSettingsPanel && (
                  <div className="danmaku-settings-panel" onClick={(e) => e.stopPropagation()}>
                    <div className="settings-header">
                      <h3 className="settings-title">弹幕设置</h3>
                      <button className="reset-btn" onClick={resetToDefault}>
                        <span className="reset-icon">↻</span>
                        恢复默认
                      </button>
                    </div>
                    
                    <div className="settings-content">
                      {/* 不透明度 */}
                      <div className="setting-item">
                        <label className="setting-label">不透明度</label>
                        <div className="slider-container">
                          <input
                            type="range"
                            min="10"
                            max="100"
                            value={danmakuSettings.opacity}
                            onChange={(e) => setDanmakuSettings(prev => ({ ...prev, opacity: parseInt(e.target.value) }))}
                            className="slider"
                          />
                          <span className="slider-value">{danmakuSettings.opacity}%</span>
                        </div>
                      </div>
                      
                      {/* 显示区域 */}
                      <div className="setting-item">
                        <label className="setting-label">显示区域</label>
                        <div className="slider-container">
                          <input
                            type="range"
                            min="0"
                            max="3"
                            step="1"
                            value={danmakuSettings.displayArea}
                            onChange={(e) => setDanmakuSettings(prev => ({ ...prev, displayArea: parseInt(e.target.value) }))}
                            className="slider"
                          />
                          <span className="slider-value">{DISPLAY_AREA_OPTIONS[danmakuSettings.displayArea]}</span>
                        </div>
                      </div>
                      
                      {/* 字体大小 */}
                      <div className="setting-item">
                        <label className="setting-label">字体大小</label>
                        <div className="slider-container">
                          <input
                            type="range"
                            min="0"
                            max="3"
                            step="1"
                            value={danmakuSettings.fontSize}
                            onChange={(e) => setDanmakuSettings(prev => ({ ...prev, fontSize: parseInt(e.target.value) }))}
                            className="slider"
                          />
                          <span className="slider-value">{FONT_SIZE_OPTIONS[danmakuSettings.fontSize]}</span>
                        </div>
                      </div>
                      
                      {/* 移动速度 */}
                      <div className="setting-item">
                        <label className="setting-label">移动速度</label>
                        <div className="slider-container">
                          <input
                            type="range"
                            min="0"
                            max="3"
                            step="1"
                            value={danmakuSettings.moveSpeed}
                            onChange={(e) => setDanmakuSettings(prev => ({ ...prev, moveSpeed: parseInt(e.target.value) }))}
                            className="slider"
                          />
                          <span className="slider-value">{MOVE_SPEED_OPTIONS[danmakuSettings.moveSpeed]}</span>
                        </div>
                      </div>
                      
                      {/* 字体颜色 */}
                      <div className="setting-item">
                        <label className="setting-label">字体颜色</label>
                        <div className="color-picker-container">
                          <input
                            type="color"
                            value={danmakuSettings.fontColor}
                            onChange={(e) => setDanmakuSettings(prev => ({ ...prev, fontColor: e.target.value }))}
                            className="color-picker"
                          />
                          <span className="color-value">{danmakuSettings.fontColor}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
            
            {/* 中间输入框区域 */}
            <div className="danmaku-input-wrapper">
              <input
                type="text"
                value={commentText}
                onChange={(e) => setCommentText(e.target.value)}
                placeholder="发一条友好的弹幕吧"
                className="danmaku-input"
              />
            </div>
            
            {/* 右侧按钮区域 */}
            <div className="danmaku-controls-right">
              {/* 表情按钮 */}
              <button
                className="emoji-btn"
                onClick={(e) => {
                  e.stopPropagation();
                  // TODO: 打开表情选择器
                }}
                title="表情"
              >
                😊
              </button>
              
              {/* 发送按钮 - 只在有内容时显示 */}
              {commentText.trim() && (
                <button
                  className="send-btn"
                  onClick={(e) => {
                    e.stopPropagation();
                    console.log('发送按钮被点击，文本:', commentText.trim());
                    pushDanmaku(commentText.trim());
                    setCommentText('');
                  }}
                  title="发送弹幕"
                >
                  ↑
                </button>
              )}
            </div>
          </div>
        </div>
        
        
        {/* 3D数字人独立放在视频区域下方 */}
        <div className="digital-human-section">
          <MySelf action={currentAction} />
        </div>

        {/* 动作控制面板 - 仅管理员可用 */}
        {isAdmin && (
          <ActionController 
            currentAction={currentAction}
            onActionChange={handleActionChange}
            language={currentLanguage} // 兼容旧接口（内部将使用 t()）
          />
        )}

        {/* 右上角提示（语音对话提示）- 仅管理员可见 */}
        {isAdmin && (
          <div className="top-right-prompt">
            <div className="speech-bubble">
              <span className="bell-icon">🔔</span>
              <span>{t('speechPrompt')}</span>
            </div>
          </div>
        )}

        {/* 底部中央装饰球 */}
        <div className="bottom-orb">
          <div className="orb-glow"></div>
        </div>
      </main>

      {/* 底部装饰区域 */}
      <footer className="footer">
        <div className="footer-curve"></div>
      </footer>
    </div>
  );
};

export default DigitalHumanPage;

